<template>
<div>
<!--  <Button type="primary" @click="showModal">管理重点人群属性</Button>-->
  <Modal
    width="1200"
    :mask-closable="false"
    v-model="modal"
    title="重点人群属性">
    <div class="divtitleClass">
      添加人员重点人群标签
    </div>
    <div class="divclass">
      <Select class="topclass" v-model="first_select" style="width:200px" @on-change="findFocusGroupLabelList('2',first_select)">
        <Option v-for="item in firstLableList" :value="item.id" :key="item.id">{{ item.name }}</Option>
      </Select>
      <Select class="topclass" v-model="second_select" style="width:200px">
        <Option v-for="item in secondLableList" :value="item.id" :key="item.id">{{ item.name }}</Option>
      </Select>
      <Button class="topclass" type="success" @click="savePeopleFocusGroup">添加</Button>
    </div>
    <div class="divtitleClass">
      人员现有重点人群标签
    </div>
    <vxe-table
      align="center"
      :data="tableData">
      <vxe-table-column field="first_level_label" title="一级标签"></vxe-table-column>
      <vxe-table-column field="second_level_label" title="二级标签"></vxe-table-column>
      <vxe-table-column width="20%" title="操作">
        <template v-slot="{ row }">
          <Button size="small" type="error" @click="deleteInfo(row)">删除</Button>
        </template>
      </vxe-table-column>
    </vxe-table>
  </Modal>
</div>
</template>

<script>
import {
  deleteUserFocusGroup,
  findFocusGroupLabelList,
  findUserFocusGroupList,
  savePeopleFocusGroup
} from '../../../../api/eventlist'

export default {
  name: 'focuss-group',
  props: {
    userInfo: {
      type: Object
    }
  },
  data () {
    return {
      first_select: '',
      second_select: '',
      tableData: [],
      value1: [],
      modal: false,
      firstLableList: [],
      secondLableList: []
    }
  },
  methods: {
    showModal () {
      this.modal = true
      this.findFocusGroupLabelList('1', '')
      this.findUserFocusGroupList()
    },
    findUserFocusGroupList () {
      let data = {
        cardno: this.userInfo.cardno
      }
      findUserFocusGroupList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    findFocusGroupLabelList (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      findFocusGroupLabelList(data).then(ret => {
        if (ret.data.errcode === 0) {
          if (e1 === '1') {
            this.firstLableList = ret.data.data
          } else if (e1 === '2') {
            this.secondLableList = ret.data.data
          }
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    deleteInfo (e) {
      let data = {
        id: e.id
      }
      deleteUserFocusGroup(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '删除成功！', desc: ret.data.errmsg })
          this.findUserFocusGroupList()
        } else {
          this.$Notice.error({ title: '删除失败！', desc: ret.data.errmsg })
        }
      })
    },
    savePeopleFocusGroup () {
      let data = {
        cardno: this.userInfo.cardno,
        name: this.userInfo.name,
        first_level_id: this.first_select,
        second_level_id: this.second_select
      }
      savePeopleFocusGroup(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '保存成功！', desc: ret.data.errmsg })
          this.findUserFocusGroupList()
          this.first_select = ''
          this.second_select = ''
        } else {
          this.$Notice.error({ title: '保存失败！', desc: ret.data.errmsg })
        }
      })
    }
  }
}
</script>

<style scoped>
.selectCss{
  display: flex;
  margin-bottom: 10px;
}
.divclass{
  margin-bottom: 10px;
}
.divtitleClass{
  background-color: rgb(236, 248, 255);
  border-left: 5px solid rgb(80, 191, 255);
  border-radius: 4px;
  font-size: 16px;
  margin: 15px 0px;
  padding: 8px 12px;
  width: 100%;
}
.topclass{
  margin-right: 5px;
}
</style>
